import React, { Component, Fragment } from 'react';
import { Spin, Row, Col, Card, Steps, Button, message, List, Modal, Pagination, Tooltip, Popover } from 'antd';
import { connect } from 'dva';
import ChangePrice from '../orderList/changePrice';
import CancelOrder from '../orderList/cancelOrder';
import ChangeRemark from '../orderList/changeRemark';
import ActiveRefund from './activeRefund';
import styles from './index.less';
import copy from 'copy-to-clipboard';
import { abs } from '@/utils/utils';
import router from 'umi/router';
const confirm = Modal.confirm;
class OrderDetails extends Component {
  state = {
    colheight: '355px',
    display: 'block',
    //步骤条状态，目前状态只有完成或未完成，但是为了保持良好的扩展性 使用string类型
    //以后扩展可直接添加进行中状态（process）
    StepsStatus: { create: 'wait', pay: 'wait', delivery: 'wait', finish: 'wait' },
    visible: false,
    packageId: 0,
    selectPack: {},
    paginationProps: {
      showSizeChanger: true,
      showQuickJumper: false,
      showTotal: total => `共 ${total} 条记录`,
      pageSize: 5,
      total: 0,
      pageIndex: 1,
    },
  }
  componentDidMount() {
    this.init();
    window.Isoption = true;
  }

  componentWillMount() {
    window.Isoption = false;
  }

  init = () => {
    this.orderDetail()
    this.orderPack()
  }
  // 发货
  sendProduct = (orderNo) => {
    router.replace({
      pathname: `/${window.storeId}/order/delivery/${orderNo}`,
    });
  }

  //备货
  sendProductPickUp =(orderNo)=> {
    router.replace({
        pathname: `/${window.storeId}/order/pickedUp/${orderNo}`,
      });
  }

  //同城发货
  sendProductLocal =(orderNo) => {
    router.replace({
        pathname: `/${window.storeId}/order/localdelivery/${orderNo}`,
      });
  }

  orderDetail = () => {
    const { dispatch, match } = this.props;
    let orderId = match.params.id;
    dispatch({
      type: 'orderdetail/GetOrderDetail',
      params: {
        OrderNo: orderId
      },
      callBack: {
        success: (data) => {
          if (data.Code === 0) {
            this.getOrderSteps()
          }
        }, error: (data) => {
          message.success('获取订单详情失败：' + data.Msg)
        }
      }
    })
  }
  orderPack = () => {
    const { dispatch, match } = this.props;
    let orderId = match.params.id;
    dispatch({
      type: 'expresssetting/GetPackageList',
      param: {
        OrderNo: orderId
      }
    })
  }
  getOrderSteps = () => {
    const { detail } = this.props;
    //初始化步骤条状态
    let stepsMap = { create: 'wait', pay: 'wait', delivery: 'wait', finish: 'wait' }
    if (detail.OrderStatus === 1) {
      stepsMap.create = 'finish';
    } else if (detail.OrderStatus === 2) {
      stepsMap.create = 'finish';
      stepsMap.pay = 'finish';
    } else if (detail.OrderStatus === 3) {
      stepsMap.create = 'finish';
      stepsMap.pay = 'finish';
      stepsMap.delivery = 'finish';
    }
    else if (detail.OrderStatus === 5) {
      stepsMap.create = 'finish';
      stepsMap.pay = 'finish';
      stepsMap.delivery = 'finish';
      stepsMap.finish = 'finish';
    } else if (detail.OrderStatus === 6) {

      stepsMap.create = detail.CreateTime ? 'finish' : 'wait';
      stepsMap.pay = detail.PaymentTime ? 'finish' : 'wait';
      stepsMap.delivery = detail.DeliveryTime ? 'finish' : 'wait';
      stepsMap.finish = detail.FinishTime ? 'finish' : 'wait';
    }
    //扩展属性messageJson

    this.setState({ StepsStatus: stepsMap })
  }

  getPkgGoodsList = (id, pkInfo) => {
    const { dispatch, match } = this.props;
    const { paginationProps } = this.state;
    this.setState({ visible: true, packageId: id, selectPack: pkInfo }, () => {
      dispatch({
        type: 'expresssetting/GetPkgGoodsList',
        param: {
          PageIndex: paginationProps.pageIndex,
          PageSize: paginationProps.pageSize,
          packageId: this.state.packageId
        },
        callback: (data) => {
          this.setState({ paginationProps: { ...this.state.paginationProps, total: data.Total } })
        }
      })
    })

  }

  // 确认收货
  clickSetFinishOrder = (orderNo) => {
    const that = this;
    confirm({
      title: '确认该订单已经收货吗?',
      content: '收货后,该订单将变为完成状态!',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        that.requestFinishOrder(orderNo)
      },
    });
  }
  // 收货方法
  requestFinishOrder = (orderNo) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'orderList/SetFinishOrder',
      payload: {
        OrderNo: orderNo
      },
      callBack: {
        success: res => {
          if (res.Code === 0) {
            message.success('确认成功');
            this.init()
          }
        },
        error: res => {
          message.success(res.Msg);
        }
      },
    })
  }
  close = () => {
    this.setState({ visible: false })
  }
  SetExtendedDay = (orderNo) => {
    console.log(orderNo)
    if (!orderNo) {
      message.error("该订单不存在")
      return;
    }
    const that = this;
    confirm({
      title: '确认要延长收货吗？',
      content: '延长收货时间可以让买家有更多时间确认收货，而不急于申请退款；延长本交易的“确认收货”期限为3天',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        that.SetExtendedDayRequest(orderNo)
      },
    });
  }
  SetExtendedDayRequest = (orderNo) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'orderdetail/SetExtendedDay',
      params: {
        OrderNo: orderNo
      },
      callBack: {
        success: res => {
          if (res.Code === 0) {
            message.success('延迟收货成功');
            this.init()
          }
        },
        error: res => {
          console.log(res)
          message.error('延迟收货失败');
        }
      },
    })
  }
  copyAddress = (text) => {
    if (copy(text)) {
      message.success("复制成功");
    } else {
      message.error("复制失败")
    }
  }
  markedReceipt = (orderNo) => {
    if (!orderNo) {
      message.error("该订单不存在")
      return;
    }
    const that = this;
    confirm({
      title: '确认所选择的订单已经收款吗？',
      content: '标记收款后，订单状态将变为待发货。',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        that.markedReceiptRequest(orderNo)
      },
    });
  }
  markedReceiptRequest = (orderNo) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'orderdetail/MarkedReceipt',
      params: {
        OrderNo: orderNo
      },
      callBack: {
        success: res => {
          if (res.Code === 0) {
            message.success('操作成功');
            this.init()
          }
        },
        error: res => {
          console.log(res)
          message.error('操作失败');
        }
      },
    })
  }
  onShowSizeChange = (current, pageSize) => {

    let { paginationProps } = this.state;
    let pagination = {
      ...paginationProps,
      pageIndex: current,
      pageSize: pageSize
    };
    this.setState({ paginationProps: pagination }, () => {
      this.getPkgGoodsList(this.state.packageId, this.state.selectPack);
    })
  }

  clickRefund = (name, Id) => {
    const title = "商家主动退款";
    const width = 640;
    this.activeRefund.show({ title, width, name, Id }, this.init)
  }

  render() {
    const { detail, packageList, pkgGoodsList, loading, loadSelect, oemInfo, finishOrderLoading } = this.props;
    const { StepsStatus, paginationProps, visible, selectPack } = this.state;
    const Step = Steps.Step;
    if(detail&&detail.DeliveryType===1) { //快递发货
        return (
            <Fragment>
              <Spin spinning={loading}>
                <Card bordered={false} className={styles.Steps}>
                  <Steps >
                    <Step status={StepsStatus.create} title="买家下单" description={detail && detail.CreateTime} />
                    <Step status={StepsStatus.pay} title="买家付款" description={detail && detail.PaymentTime} />
                    <Step status={StepsStatus.delivery} title="商家发货" description={detail && detail.DeliveryTime} />
                    <Step status={StepsStatus.finish} title="交易完成" description={detail && detail.FinishTime} />
                  </Steps>
                </Card>
                <Card bordered={false} className={styles.Details}>
                  <Row>
                    <Col span={8} style={{ height: this.state.colheight }}>
                      <p className="title">订单信息</p>
                      <p className="xkd-text-ellipsis">订单编号：{detail && detail.OrderNo}
                        {
                          detail.PaymentOrderNo && detail.TradeId ?
                            <Tooltip
                              title={<div><p className="xkd-text-ellipsis">内部支付流水号：{detail && detail.PaymentOrderNo}</p> <p className="xkd-text-ellipsis">外部支付流水号：{detail && detail.TradeId}</p></div>}
                            >
                              <a>更多</a>
                            </Tooltip> : null
                        }
      
      
                      </p>
                      {/* <div style={{ display: this.state.display }}>
                        <p className="xkd-text-ellipsis">内部支付流水号：{detail && detail.PaymentOrderNo}</p>
                        <p className="xkd-text-ellipsis">外部支付流水号：{detail && detail.TradeId}</p>
                      </div> */}
                      <p className="xkd-text-ellipsis">付款方式：{detail && detail.PaymentChannelNameStr}</p>
                      <p className="xkd-text-ellipsis">买家昵称：{detail && detail.MemberName}</p>
                      <p className="xkd-text-ellipsis">配送方式：{detail && detail.DeliveryTypeName}</p>
                      <p>
                        <span>收货信息：</span>
                        {detail && detail.Address}
                        <a onClick={() => this.copyAddress(detail.Address)}>复制</a>
                      </p>
                      {detail && detail.Remark ?
                        <p>
                          <span>买家留言：</span>
                          <div className="xkd-text-ellipsis2">{detail.Remark}</div>
                        </p>
                        : ''}
                    </Col>
      
                    {
                      detail && detail.OrderStatus === 1 ?
                        //待付款
                        <Col span={16} style={{ height: this.state.colheight }}>
      
                          <p className="title">订单状态</p>
                          <div className="dashed">
      
                            <ChangePrice
                              ref={e => {
                                this.changePrice = e;
                              }}
                            />
                            <CancelOrder
                              ref={e => {
                                this.cancelOrder = e;
                              }}
                            />
                            <div className="state">
                              <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                              <p>等待买家付款</p>
                              <span>订单将在<span className={styles.timeStr}>{detail.CloseTimeStr}</span>后取消，请提醒买家及时付款</span>
                            </div>
                            <div className="act">
                              <Button
                                type="primary"
                                onClick={
                                  () => {
                                    const title = `订单原价(含运费)：￥${abs(detail.OrderPayAmount, 2)}`;
                                    const OrderNo = detail.OrderNo;
                                    const width = 960;
                                    this.changePrice.show({ width, title, OrderNo }, this.init)
                                  }
                                }
                              >修改价格</Button>
                              {/* <Button
                                onClick={
                                  () => {
                                    const title = "取消订单";
                                    const OrderNo = detail.OrderNo;
                                    const width = 320;
                                    this.cancelOrder.show({ width, title, OrderNo }, this.init)
                                  }
                                }
                              >取消订单</Button> */}
      
                              <Button onClick={() => { this.markedReceipt(detail.OrderNo) }}>标记收款</Button>
      
                              <a onClick={
                                () => {
                                  const title = "修改备注";
                                  const OrderNo = detail.OrderNo;
                                  this.changeRemark.show({ title, OrderNo }, this.init)
                                }
                              }>备注</a>
                            </div>
                          </div>
                          {detail && detail.MerchantRemark ? <div className="note">
                            <p>商家备注：</p>{detail.MerchantRemark}
                          </div> : ''}
                        </Col> : detail.OrderStatus === 2 ?
                          //待发货
                          <Col span={16} style={{ height: this.state.colheight }}>
                            <p className="title">订单状态</p>
                            <div className="dashed">
                              <div className="state">
                                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                                <p>已付款，待发货</p>
                                <span>买家已付款，请及时发货</span>
                              </div>
                              <div className="act">
                                <Button type="primary" onClick={() => this.sendProduct(detail.OrderNo)}>去发货</Button>
                                <a onClick={
                                  () => {
                                    const title = "修改备注";
                                    const OrderNo = detail.OrderNo;
                                    this.changeRemark.show({ title, OrderNo }, this.init)
                                  }
                                }>备注</a>
                              </div>
                            </div>
                            {detail && detail.MerchantRemark ? <div className="note">
                              <p>商家备注：</p>{detail.MerchantRemark}
                            </div> : ''}
                          </Col> : detail.OrderStatus === 3 ?
                            //待收货
                            <Col span={16} style={{ height: this.state.colheight }}>
                              <p className="title">订单状态</p>
                              <div className="dashed">
                                <div className="state">
                                  <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                                  <p>商家已发货，等待交易成功</p>
                                  <span>买家在<span className={styles.timeStr}>{detail.SureTimeStr}</span>内未申请退款，交易将自动完成</span>
                                </div>
      
                                <div className="act">
                                  <Button type="primary" onClick={() => this.SetExtendedDay(detail.OrderNo)}>延迟收货</Button>
                                  <Button onClick={() => this.clickSetFinishOrder(detail.OrderNo)} loading={finishOrderLoading} >确认收货</Button>
      
                                </div>
                              </div>
                              {detail && detail.MerchantRemark ? <div className="note">
                                <p>商家备注：</p>{detail.MerchantRemark}
                              </div> : ''}
                            </Col> : detail.OrderStatus === 5 ?
                              //已完成
                              <Col span={16} style={{ height: this.state.colheight }}>
                                <p className="title">订单状态</p>
                                <div className="dashed">
                                  <div className="state">
                                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-success.png'} />
                                    <p>交易完成</p>
                                    <span>{detail.PaymentChannel === 2 ? "买家已选择货到付款，您需自行安排配送和向买家收款。" : "买家已确认收货，本次交易完成"}</span>
                                  </div>
      
      
                                </div>
                                {detail && detail.MerchantRemark ? <div className="note">
                                  <p>商家备注：</p>{detail.MerchantRemark}
                                </div> : ''}
                              </Col> : detail.OrderStatus === 6 ?
                                //已关闭
                                <Col span={16} style={{ height: this.state.colheight }}>
                                  <p className="title">订单状态</p>
                                  <div className="dashed">
                                    {
      
                                      detail.IsRefundClose ? <Steps>
                                        <Step status="finish" title="交易关闭" description="订单已全额退款，交易关闭" />
                                      </Steps> :
                                        <Steps>
                                          <Step status="finish" title="交易关闭" description="买家已取消订单，本次交易关闭" />
                                        </Steps>
                                    }
      
      
                                  </div>
                                  {detail && detail.MerchantRemark ? <div className="note">
                                    <p>商家备注：</p>{detail.MerchantRemark}
                                  </div> : ''}
      
                                </Col> : null
                    }
      
                  </Row>
                </Card>
                <Card bordered={false} className={styles.Goods}>
                  <Row className={styles.GoodsTitle}>
                    <Col span={8}>商品信息</Col>
                    <Col span={2}>价格</Col>
                    <Col span={2}>数量</Col>
                    <Col span={2}>优惠</Col>
                    <Col span={3}>商家改价</Col>
                    <Col span={3}>小计</Col>
                    <Col span={4}>状态</Col>
                  </Row>
                  <List
                    itemLayout="vertical"
                    size="large"
                    dataSource={detail && detail.OrderItems ? detail.OrderItems : []}
                    renderItem={item => (
                      <List.Item key={item.Id}>
      
                        {
                          <Fragment>
                            <Row>
                              <Col span={8}>
                                <img src={`${oemInfo.cdnUrl}/${item.ThumbnailUrl}`} />
                                <p className="xkd-text-ellipsis2">{item.ProductName}</p>
                                <span>{item.SkuName}</span>
                              </Col>
                              <Col span={2}>￥{item.SingleFee}</Col>
                              <Col span={2}>{item.BuyNum}</Col>
                              <Col span={2}>{item.DiscountFee ? item.DiscountFee : '-'}</Col>
                              <Col span={3}>￥{item.ModifyProductFee}</Col>
                              <Col span={3}>
                                ￥{item.SubtotalFee}
                                {
                                  item.CanActiveRefund ? <p><a onClick={() => this.clickRefund(item.ProductName, item.Id)}>主动退款</a></p> : null
                                }
                                {
                                  item.ActiveRefundList && item.ActiveRefundList.length > 0 &&
                                  <Popover title="详情" trigger="hover" placement="leftBottom" content={(
                                    item.ActiveRefundList.map((item, index) => {
                                      return <p key={index}>
                                        <span style={{ marginRight: 8 }}>{item.OperMan}</span>
                                        <span>{item.Type}</span>
                                        <span>{item.Fee}</span>
                                        <span style={{ marginLeft: 8 }}>{item.Status}</span>
                                      </p>
                                    })
                                  )}>
                                    <p style={{ color: '#F5222D' }}>记录</p>
                                  </Popover>
      
                                }
      
                              </Col>
                              <Col span={4}> {item.RightsStatus === 0 ? item.StatusName : <span>{item.RightsStatusName}</span>}</Col>
                            </Row>
                            {
                              item.Message ? <Row className="msg">
                                {
                                  <Col>
                                    {
                                      item.Message.map((value, index) => {
                                        return <p key={index}>{value.Name}：{value.text}</p>
                                      })
                                    }
                                  </Col>
                                }
      
                              </Row> : null
                            }
                          </Fragment>
                        }
                      </List.Item>
                    )}
                  />
                  <Row className="total">
                    <Col>
                        <div className="price">
                                <div>
                                    <p>商品总价：</p>
                                    <span>￥{detail && abs(detail.ProductFee, 2)}</span>
                                </div>
                                <div>
                                    <p>运费：</p>
                                    <span>￥{detail && abs(detail.OrderPayFreightAmount,2)}</span>
                                </div>
                                {detail && detail.DiscountFee!=0&&<div>
                                    <p>优惠：</p>
                                    <span>￥{detail && abs(detail.DiscountFee,2)}</span> 
                                </div>}
                                {detail && detail.ModifiedProductFee!=0&&<div>
                                    <p>商品调价：</p>
                                    <span>￥{detail && abs(detail.ModifiedProductFee,2)}</span>
                                </div>}
                                <div>
                                    <p>订单金额：</p>
                                    <span style={{color: '#F5222D'}}>￥{detail && abs(detail.OrderPayAmount,2)}</span>
                                </div>
                        </div>
                    </Col>
                  </Row>
      
                  <Row className="logistics">
                    <Col>物流包裹</Col>
                  </Row>
                  <List
                    itemLayout="vertical"
                    size="large"
                    dataSource={packageList && packageList ? packageList : []}
                    renderItem={item => (
                      <List.Item key={item.Id}>
                        {
                          <Fragment>
                            <Row>
                              <Col span={15}>
                                <b>包裹一</b><a href="http://www.kuaidi100.com/" className="xkd-ml16" target="_blank">查看物流</a><br />
                                {
                                  item.ExpressName ? <div>物流公司：{item.ExpressName}<br />快递单号：{item.WaybillNum}</div> : <div>无需物流</div>
                                }
      
                              </Col>
                              <Col span={4} offset={5}><a onClick={() => this.getPkgGoodsList(item.Id, item)}>查看商品</a></Col>
                            </Row>
                          </Fragment>
                        }
                      </List.Item>
                    )}
                  />
      
                  <ChangeRemark
                    ref={e => {
                      this.changeRemark = e;
                    }}
                  />
                  <Modal
                    title="查看商品"
                    visible={visible}
                    width="640px"
                    footer={null}
                    onCancel={this.close}
                    wrapClassName="SeeGoods"
                  >
                    <Spin spinning={loadSelect}>
                      <Row className="title">
                        <Col>
                          <span>【包裹一】</span>
                          <span>物流公司：{selectPack && selectPack.ExpressName}</span>
                          快递单号：{selectPack && selectPack.WaybillNum}
                        </Col>
                      </Row>
                      <Row className="GoodsTit">
                        <Col span={6}>商品信息</Col>
                        <Col span={6} offset={12}>发货数量</Col>
                      </Row>
      
      
                      <List
                        itemLayout="vertical"
                        size="large"
                        dataSource={pkgGoodsList && pkgGoodsList.DataList ? pkgGoodsList.DataList : []}
                        renderItem={item => (
                          <List.Item key={item.Id}>
      
                            {
                              <Row className="GoodsList">
                                <Col span={3}>
                                  <img src={`${oemInfo.cdnUrl}/${item.ThumbnailUrl}`} />
                                </Col>
                                <Col span={12}>
                                  <div className="xkd-text-ellipsis2">{item.ProductName}</div>
                                </Col>
                                <Col span={4} offset={5}>{item.DeliveryNum}</Col>
                              </Row>
                            }
                          </List.Item>
                        )}
                      />
                    </Spin>
                    <Pagination
      
                      onChange={this.onShowSizeChange}
                      //showTotal={paginationProps.showTotal}
                      total={paginationProps.total}
                      current={paginationProps.pageIndex}
                      pageSize={paginationProps.pageSize}
                    />
                  </Modal>
                </Card>
              </Spin>
              <ActiveRefund ref={
                e => {
                  this.activeRefund = e
                }
              } />
            </Fragment>
          );
    }
    if(detail&&detail.DeliveryType===2) { //上门自提
        return (
            <Fragment>
                <Spin spinning={loading}>
                    <Card bordered={false} className={styles.Steps}>
                        <Steps >
                            <Step status="finish" title="买家下单" description={detail && detail.CreateTime} />
                            <Step status={detail.OrderStatus===2?'process':'finish'} title="商家备货" description={detail && detail.DeliveryTime} />
                            <Step status={detail.OrderStatus===3?'process':detail.OrderStatus===2?'wait':'finish'} title="买家自提" description={detail && detail.FinishTime} />
                            <Step status={detail.OrderStatus===2?'wait':detail.OrderStatus===3?'wait':'finish'} title="交易完成" description={detail && detail.FinishTime} />
                        </Steps>
                    </Card>
                    <Card bordered={false} className={styles.Details}>
                        <Row>
                            <Col span={8} style={{ height: this.state.colheight }}>
                            <p className="title">订单信息</p>
                            <p className="xkd-text-ellipsis">订单编号：{detail && detail.OrderNo}
                                {
                                detail.PaymentOrderNo && detail.TradeId ?
                                    <Tooltip
                                    title={<div><p className="xkd-text-ellipsis">内部支付流水号：{detail && detail.PaymentOrderNo}</p> <p className="xkd-text-ellipsis">外部支付流水号：{detail && detail.TradeId}</p></div>}
                                    >
                                    <a>更多</a>
                                    </Tooltip> : null
                                }
                            </p>
                            <p className="xkd-text-ellipsis">订单类型：{detail && detail.OrderTypeName}</p>
                            <p className="xkd-text-ellipsis">订单来源：{detail && detail.OrderSourceName}</p>
                            <p className="xkd-text-ellipsis">付款方式：{detail && detail.PaymentChannelNameStr}</p>
                            <p className="xkd-text-ellipsis">买家昵称：{detail && detail.MemberName}</p>
                            <p className="xkd-text-ellipsis">配送方式：{detail && detail.DeliveryTypeName}</p>
                            <p>
                                <span>自提地点：</span>
                                {detail && detail.PickupAddress.FullAddress}
                                {/* <a onClick={() => this.copyAddress(detail.Address)}>复制</a> */}
                            </p>
                            <p className="xkd-text-ellipsis">提货人：{detail && detail.ReceiverAddress?detail.ReceiverAddress.Receiver:'-'}</p>
                            <p className="xkd-text-ellipsis">联系方式：{detail && detail.ReceiverAddress?detail.ReceiverAddress.ReceiverPhone:'-'}</p>
                            <p>
                                <span>买家留言：</span>
                                <div className="xkd-text-ellipsis2">{detail &&detail.Remark?detail.Remark:'-'}</div>
                            </p>
                            </Col>

                      {
                      detail && detail.OrderStatus === 1 ?
                        //待付款
                        <Col span={16} style={{ height: this.state.colheight }}>
      
                          <p className="title">订单状态</p>
                          <div className="dashed">
      
                            <ChangePrice
                              ref={e => {
                                this.changePrice = e;
                              }}
                            />
                            <CancelOrder
                              ref={e => {
                                this.cancelOrder = e;
                              }}
                            />
                            <div className="state">
                              <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                              <p>等待买家付款</p>
                              <span>订单将在<span className={styles.timeStr}>{detail.CloseTimeStr}</span>后取消，请提醒买家及时付款</span>
                            </div>
                            <div className="act">
                              <Button
                                type="primary"
                                onClick={
                                  () => {
                                    const title = `订单原价(含运费)：￥${abs(detail.OrderPayAmount, 2)}`;
                                    const OrderNo = detail.OrderNo;
                                    const width = 960;
                                    this.changePrice.show({ width, title, OrderNo }, this.init)
                                  }
                                }
                              >修改价格</Button>
                              {/* <Button
                                onClick={
                                  () => {
                                    const title = "取消订单";
                                    const OrderNo = detail.OrderNo;
                                    const width = 320;
                                    this.cancelOrder.show({ width, title, OrderNo }, this.init)
                                  }
                                }
                              >取消订单</Button> */}
      
                              <Button onClick={() => { this.markedReceipt(detail.OrderNo) }}>标记收款</Button>
      
                              <a onClick={
                                () => {
                                  const title = "修改备注";
                                  const OrderNo = detail.OrderNo;
                                  this.changeRemark.show({ title, OrderNo }, this.init)
                                }
                              }>备注</a>
                            </div>
                          </div>
                          {detail && detail.MerchantRemark ? <div className="note">
                            <p>商家备注：</p>{detail.MerchantRemark}
                          </div> : ''}
                        </Col> : detail.OrderStatus === 2 ?
                          //待发货
                          <Col span={16} style={{ height: this.state.colheight }}>
                            <p className="title">订单状态</p>
                            <div className="dashed">
                              <div className="state">
                                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                                <p>备货中</p>
                                <span>买家已付款，请及时完成备货</span>
                              </div>
                              <div className="act">
                                {/* <Button type="primary" onClick={() => this.sendProductPickUp(detail.OrderNo)}>去备货</Button> // 先隐藏还有用 */} 
                                <a onClick={
                                  () => {
                                    const title = "修改备注";
                                    const OrderNo = detail.OrderNo;
                                    this.changeRemark.show({ title, OrderNo }, this.init)
                                  }
                                }>备注</a>
                              </div>
                            </div>
                            {detail && detail.MerchantRemark ? <div className="note">
                              <p>商家备注：</p>{detail.MerchantRemark}
                            </div> : ''}
                          </Col> : detail.OrderStatus === 3 ?
                            //待收货
                            <Col span={16} style={{ height: this.state.colheight }}>
                              <p className="title">订单状态</p>
                              <div className="dashed">
                                <div className="state">
                                  <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                                  <p>商家已完成备货，等待买家自提</p>
                                </div>
                              </div>
                              {detail && detail.MerchantRemark ? <div className="note">
                                <p>商家备注：</p>{detail.MerchantRemark}
                              </div> : ''}
                            </Col> : detail.OrderStatus === 5 ?
                              //已完成
                              <Col span={16} style={{ height: this.state.colheight }}>
                                <p className="title">订单状态</p>
                                <div className="dashed">
                                  <div className="state">
                                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-success.png'} />
                                    <p>交易完成</p>
                                    <span>买家已提货，本次交易完成</span>
                                  </div>
      
      
                                </div>
                                {detail && detail.MerchantRemark ? <div className="note">
                                  <p>商家备注：</p>{detail.MerchantRemark}
                                </div> : ''}
                              </Col> : detail.OrderStatus === 6 ?
                                //已关闭
                                <Col span={16} style={{ height: this.state.colheight }}>
                                  <p className="title">订单状态</p>
                                  <div className="dashed">
                                    {
      
                                      detail.IsRefundClose ? <Steps>
                                        <Step status="finish" title="交易关闭" description="订单已全额退款，交易关闭" />
                                      </Steps> :
                                        <Steps>
                                          <Step status="finish" title="交易关闭" description="买家已取消订单，本次交易关闭" />
                                        </Steps>
                                    }
      
      
                                  </div>
                                  {detail && detail.MerchantRemark ? <div className="note">
                                    <p>商家备注：</p>{detail.MerchantRemark}
                                  </div> : ''}
      
                                </Col> : null
                            }
                            </Row>
                        </Card>
                        <Card bordered={false} className={styles.Goods}>
                        <Row className={styles.GoodsTitle}>
                        <Col span={8}>商品信息</Col>
                        <Col span={2}>价格</Col>
                        <Col span={2}>数量</Col>
                        <Col span={2}>优惠</Col>
                        <Col span={3}>商家改价</Col>
                        <Col span={3}>小计</Col>
                        <Col span={4}>状态</Col>
                        </Row>
                        <List
                        itemLayout="vertical"
                        size="large"
                        dataSource={detail && detail.OrderItems ? detail.OrderItems : []}
                        renderItem={item => (
                            <List.Item key={item.Id}>
            
                            {
                                <Fragment>
                                <Row>
                                    <Col span={8}>
                                    <img src={`${oemInfo.cdnUrl}/${item.ThumbnailUrl}`} />
                                    <p className="xkd-text-ellipsis2">{item.ProductName}</p>
                                    <span>{item.SkuName}</span>
                                    </Col>
                                    <Col span={2}>￥{item.SingleFee}</Col>
                                    <Col span={2}>{item.BuyNum}</Col>
                                    <Col span={2}>{item.DiscountFee ? item.DiscountFee : '-'}</Col>
                                    <Col span={3}>￥{item.ModifyProductFee}</Col>
                                    <Col span={3}>
                                    ￥{item.SubtotalFee}
                                    {
                                        item.CanActiveRefund ? <p><a onClick={() => this.clickRefund(item.ProductName, item.Id)}>主动退款</a></p> : null
                                    }
                                    {
                                        item.ActiveRefundList && item.ActiveRefundList.length > 0 &&
                                        <Popover title="详情" trigger="hover" placement="leftBottom" content={(
                                        item.ActiveRefundList.map((item, index) => {
                                            return <p key={index}>
                                            <span style={{ marginRight: 8 }}>{item.OperMan}</span>
                                            <span>{item.Type}</span>
                                            <span>{item.Fee}</span>
                                            <span style={{ marginLeft: 8 }}>{item.Status}</span>
                                            </p>
                                        })
                                        )}>
                                        <p style={{ color: '#F5222D' }}>记录</p>
                                        </Popover>
            
                                    }
            
                                    </Col>
                                    <Col span={4}> {item.RightsStatus === 0 ? item.StatusName : <span>{item.RightsStatusName}</span>}</Col>
                                </Row>
                                {
                                    item.Message ? <Row className="msg">
                                    {
                                        <Col>
                                        {
                                            item.Message.map((value, index) => {
                                            return <p key={index}>{value.Name}：{value.text}</p>
                                            })
                                        }
                                        </Col>
                                    }
            
                                    </Row> : null
                                }
                                </Fragment>
                            }
                            </List.Item>
                        )}
                        />
                        <Row className="total">
                        <Col>
                            <div className="price">
                                <div>
                                    <p>商品总价：</p>
                                    <span>￥{detail && abs(detail.ProductFee, 2)}</span>
                                </div>
                                <div>
                                    <p>运费：</p>
                                    <span>￥{detail && abs(detail.OrderPayFreightAmount,2)}</span>
                                </div>
                                {detail && detail.DiscountFee!=0&&<div>
                                    <p>优惠：</p>
                                    <span>￥{detail && abs(detail.DiscountFee,2)}</span> 
                                </div>}
                                {detail && detail.ModifiedProductFee!=0&&<div>
                                    <p>商品调价：</p>
                                    <span>￥{detail && abs(detail.ModifiedProductFee,2)}</span>
                                </div>}
                                <div>
                                    <p>订单金额：</p>
                                    <span style={{color: '#F5222D'}}>￥{detail && abs(detail.OrderPayAmount,2)}</span>
                                </div>
                            </div>
                        </Col>
                        </Row>
                    </Card>
                </Spin>               
                <ChangePrice
                    ref={e => {
                    this.changePrice = e;
                    }}
                />
                <CancelOrder
                    ref={e => {
                    this.cancelOrder = e;
                    }}
                />

               <ChangeRemark
                ref={e => {
                this.changeRemark = e;
                }}
             />
            <ActiveRefund
                ref={e => {
                    this.activeRefund = e
                }}
            />
            </Fragment>
        )
    }
    if(detail&&detail.DeliveryType===3) { // 同城配送(只去掉快递查询其他一样)
        return (
            <Fragment>
            <Spin spinning={loading}>
              <Card bordered={false} className={styles.Steps}>
                <Steps >
                  <Step status={StepsStatus.create} title="买家下单" description={detail && detail.CreateTime} />
                  <Step status={StepsStatus.pay} title="买家付款" description={detail && detail.PaymentTime} />
                  <Step status={StepsStatus.delivery} title="商家发货" description={detail && detail.DeliveryTime} />
                  <Step status={StepsStatus.finish} title="交易完成" description={detail && detail.FinishTime} />
                </Steps>
              </Card>
              <Card bordered={false} className={styles.Details}>
                <Row>
                  <Col span={8} style={{ height: this.state.colheight }}>
                    <p className="title">订单信息</p>
                    <p className="xkd-text-ellipsis">订单编号：{detail && detail.OrderNo}
                      {
                        detail.PaymentOrderNo && detail.TradeId ?
                          <Tooltip
                            title={<div><p className="xkd-text-ellipsis">内部支付流水号：{detail && detail.PaymentOrderNo}</p> <p className="xkd-text-ellipsis">外部支付流水号：{detail && detail.TradeId}</p></div>}
                          >
                            <a>更多</a>
                          </Tooltip> : null
                      }
    
    
                    </p>
                    <p className="xkd-text-ellipsis">付款方式：{detail && detail.PaymentChannelNameStr}</p>
                    <p className="xkd-text-ellipsis">买家昵称：{detail && detail.MemberName}</p>
                    <p className="xkd-text-ellipsis">配送方式：{detail && detail.DeliveryTypeName}</p>
                    <p>
                      <span>收货信息：</span>
                      {detail && detail.Address}
                      <a onClick={() => this.copyAddress(detail.Address)}>复制</a>
                    </p>
                    {detail && detail.Remark ?
                      <p>
                        <span>买家留言：</span>
                        <div className="xkd-text-ellipsis2">{detail.Remark}</div>
                      </p>
                      : ''}
                  </Col>
    
                  {
                    detail && detail.OrderStatus === 1 ?
                      //待付款
                      <Col span={16} style={{ height: this.state.colheight }}>
    
                        <p className="title">订单状态</p>
                        <div className="dashed">
    
                          <ChangePrice
                            ref={e => {
                              this.changePrice = e;
                            }}
                          />
                          <CancelOrder
                            ref={e => {
                              this.cancelOrder = e;
                            }}
                          />
                          <div className="state">
                            <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                            <p>等待买家付款</p>
                            <span>订单将在<span className={styles.timeStr}>{detail.CloseTimeStr}</span>后取消，请提醒买家及时付款</span>
                          </div>
                          <div className="act">
                            <Button
                              type="primary"
                              onClick={
                                () => {
                                  const title = `订单原价(含运费)：￥${abs(detail.OrderPayAmount, 2)}`;
                                  const OrderNo = detail.OrderNo;
                                  const width = 960;
                                  this.changePrice.show({ width, title, OrderNo }, this.init)
                                }
                              }
                            >修改价格</Button>
                            {/* <Button
                              onClick={
                                () => {
                                  const title = "取消订单";
                                  const OrderNo = detail.OrderNo;
                                  const width = 320;
                                  this.cancelOrder.show({ width, title, OrderNo }, this.init)
                                }
                              }
                            >取消订单</Button> */}
    
                            <Button onClick={() => { this.markedReceipt(detail.OrderNo) }}>标记收款</Button>
    
                            <a onClick={
                              () => {
                                const title = "修改备注";
                                const OrderNo = detail.OrderNo;
                                this.changeRemark.show({ title, OrderNo }, this.init)
                              }
                            }>备注</a>
                          </div>
                        </div>
                        {detail && detail.MerchantRemark ? <div className="note">
                          <p>商家备注：</p>{detail.MerchantRemark}
                        </div> : ''}
                      </Col> : detail.OrderStatus === 2 ?
                        //待发货
                        <Col span={16} style={{ height: this.state.colheight }}>
                          <p className="title">订单状态</p>
                          <div className="dashed">
                            <div className="state">
                              <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                              <p>已付款，待发货</p>
                              <span>买家已付款，请及时发货</span>
                            </div>
                            <div className="act">
                              <Button type="primary" onClick={() => this.sendProductLocal(detail.OrderNo)}>去发货</Button>
                              <a onClick={
                                () => {
                                  const title = "修改备注";
                                  const OrderNo = detail.OrderNo;
                                  this.changeRemark.show({ title, OrderNo }, this.init)
                                }
                              }>备注</a>
                            </div>
                          </div>
                          {detail && detail.MerchantRemark ? <div className="note">
                            <p>商家备注：</p>{detail.MerchantRemark}
                          </div> : ''}
                        </Col> : detail.OrderStatus === 3 ?
                          //待收货
                          <Col span={16} style={{ height: this.state.colheight }}>
                            <p className="title">订单状态</p>
                            <div className="dashed">
                              <div className="state">
                                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                                <p>商家已发货，等待交易成功</p>
                                <span>买家在<span className={styles.timeStr}>{detail.SureTimeStr}</span>内未申请退款，交易将自动完成</span>
                              </div>
    
                              <div className="act">
                                <Button type="primary" onClick={() => this.SetExtendedDay(detail.OrderNo)}>延迟收货</Button>
                                <Button onClick={() => this.clickSetFinishOrder(detail.OrderNo)} loading={finishOrderLoading} >确认收货</Button>
    
                              </div>
                            </div>
                            {detail && detail.MerchantRemark ? <div className="note">
                              <p>商家备注：</p>{detail.MerchantRemark}
                            </div> : ''}
                          </Col> : detail.OrderStatus === 5 ?
                            //已完成
                            <Col span={16} style={{ height: this.state.colheight }}>
                              <p className="title">订单状态</p>
                              <div className="dashed">
                                <div className="state">
                                  <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-success.png'} />
                                  <p>交易完成</p>
                                  <span>{detail.PaymentChannel === 2 ? "买家已选择货到付款，您需自行安排配送和向买家收款。" : "买家已确认收货，本次交易完成"}</span>
                                </div>
    
    
                              </div>
                              {detail && detail.MerchantRemark ? <div className="note">
                                <p>商家备注：</p>{detail.MerchantRemark}
                              </div> : ''}
                            </Col> : detail.OrderStatus === 6 ?
                              //已关闭
                              <Col span={16} style={{ height: this.state.colheight }}>
                                <p className="title">订单状态</p>
                                <div className="dashed">
                                  {
    
                                    detail.IsRefundClose ? <Steps>
                                      <Step status="finish" title="交易关闭" description="订单已全额退款，交易关闭" />
                                    </Steps> :
                                      <Steps>
                                        <Step status="finish" title="交易关闭" description="买家已取消订单，本次交易关闭" />
                                      </Steps>
                                  }
    
    
                                </div>
                                {detail && detail.MerchantRemark ? <div className="note">
                                  <p>商家备注：</p>{detail.MerchantRemark}
                                </div> : ''}
    
                              </Col> : null
                  }
    
                </Row>
              </Card>
              <Card bordered={false} className={styles.Goods}>
                <Row className={styles.GoodsTitle}>
                  <Col span={8}>商品信息</Col>
                  <Col span={2}>价格</Col>
                  <Col span={2}>数量</Col>
                  <Col span={2}>优惠</Col>
                  <Col span={3}>商家改价</Col>
                  <Col span={3}>小计</Col>
                  <Col span={4}>状态</Col>
                </Row>
                <List
                  itemLayout="vertical"
                  size="large"
                  dataSource={detail && detail.OrderItems ? detail.OrderItems : []}
                  renderItem={item => (
                    <List.Item key={item.Id}>
    
                      {
                        <Fragment>
                          <Row>
                            <Col span={8}>
                              <img src={`${oemInfo.cdnUrl}/${item.ThumbnailUrl}`} />
                              <p className="xkd-text-ellipsis2">{item.ProductName}</p>
                              <span>{item.SkuName}</span>
                            </Col>
                            <Col span={2}>￥{item.SingleFee}</Col>
                            <Col span={2}>{item.BuyNum}</Col>
                            <Col span={2}>{item.DiscountFee ? item.DiscountFee : '-'}</Col>
                            <Col span={3}>￥{item.ModifyProductFee}</Col>
                            <Col span={3}>
                              ￥{item.SubtotalFee}
                              {
                                item.CanActiveRefund ? <p><a onClick={() => this.clickRefund(item.ProductName, item.Id)}>主动退款</a></p> : null
                              }
                              {
                                item.ActiveRefundList && item.ActiveRefundList.length > 0 &&
                                <Popover title="详情" trigger="hover" placement="leftBottom" content={(
                                  item.ActiveRefundList.map((item, index) => {
                                    return <p key={index}>
                                      <span style={{ marginRight: 8 }}>{item.OperMan}</span>
                                      <span>{item.Type}</span>
                                      <span>{item.Fee}</span>
                                      <span style={{ marginLeft: 8 }}>{item.Status}</span>
                                    </p>
                                  })
                                )}>
                                  <p style={{ color: '#F5222D' }}>记录</p>
                                </Popover>
    
                              }
    
                            </Col>
                            <Col span={4}> {item.RightsStatus === 0 ? item.StatusName : <span>{item.RightsStatusName}</span>}</Col>
                          </Row>
                          {
                            item.Message ? <Row className="msg">
                              {
                                <Col>
                                  {
                                    item.Message.map((value, index) => {
                                      return <p key={index}>{value.Name}：{value.text}</p>
                                    })
                                  }
                                </Col>
                              }
    
                            </Row> : null
                          }
                        </Fragment>
                      }
                    </List.Item>
                  )}
                />
                <Row className="total">
                    <Col>
                        <div className="price">
                                <div>
                                    <p>商品总价：</p>
                                    <span>￥{detail && abs(detail.ProductFee, 2)}</span>
                                </div>
                                <div>
                                    <p>运费：</p>
                                    <span>￥{detail && abs(detail.OrderPayFreightAmount,2)}</span>
                                </div>
                                {detail && detail.DiscountFee!=0&&<div>
                                    <p>优惠：</p>
                                    <span>￥{detail && abs(detail.DiscountFee,2)}</span> 
                                </div>}
                                {detail && detail.ModifiedProductFee!=0&&<div>
                                    <p>商品调价：</p>
                                    <span>￥{detail && abs(detail.ModifiedProductFee,2)}</span>
                                </div>}
                                <div>
                                    <p>订单金额：</p>
                                    <span style={{color: '#F5222D'}}>￥{detail && abs(detail.OrderPayAmount,2)}</span>
                                </div>
                        </div>
                    </Col>
                </Row>   
              </Card>
            </Spin>
            <ChangeRemark
                ref={e => {
                this.changeRemark = e;
                }}
             />
            <ActiveRefund
                ref={e => {
                    this.activeRefund = e
                }}
            />
          </Fragment>
        )
    }
    else {
        return null
    }
  }
}

export default connect(({ orderdetail, expresssetting, orderList, global, loading }) => ({
  orderList,
  finishOrderLoading: loading.effects['orderList/SetFinishOrder'],
  detail: orderdetail.detail,
  packageList: expresssetting.packageList,
  pkgGoodsList: expresssetting.pkgGoodsList,
  oemInfo: global.oemInfo,
  loading: loading.effects['orderdetail/GetOrderDetail'],
  loadSelect: loading.effects['expresssetting/GetPkgGoodsList'],
}))(OrderDetails)

